<template>
  <div>
    <!-- 表格整体 -->
    <common-table
      :table-attrs="tableAttrs"
      :is-screen="false"
      @multiple="selectHandler"
      @controller="controllerHandler"
    >
      <template #buttons>
        <el-button size="small" @click="isShowDialog = !isShowDialog">添加分类</el-button>
      </template>
      <!-- 表格展开信息 -->
      <template #expand="props">
        {{ props.props.row }}
      </template>
    </common-table>
    <!-- 弹出框编辑表单 -->
    <el-dialog title="添加分类" v-model="isShowDialog">
      <common-form
        :form-infos="editForm"
        :form-attrs="{
          'label-width': 'auto',
          'label-position': 'left',
          size: 'small',
        }"
        @submit="onEditSubmit"
      />
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, ref, onMounted } from "vue";

export default defineComponent({
  setup() {
    const {proxy} = getCurrentInstance()

    const tableAttrs = ref({
      // Table Attributes
      name: "商品分类",
      infos: [
        "商品分类由平台端进行维护，商家添加商品的时候需要选择对应的商品分类,用户可以根据商品分类搜索商品。",
        "点击商品分类名前“+”符号，显示当前商品分类的下级分类。",
        "商品分类关联类型是前台搜索分类查询商品之后可以通过商品类型的属性进行进一步搜索。",
        "商品分类的佣金比率是商家商品销售之后，平台获取佣金，具体佣金金额按照商品分类进行计算。",
        "可通过拖拽进行分类排序",
      ],
      attrs: {
        data: [
          //表格需要的数据
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
        ref: "multipleTable",
        style: "100%",
      },
      // Table-column Attributes
      column: [
        {
          type: "expand", //多选框Attribute
        },
        {
          type: "selection", //多选框Attribute
        },
        {
          prop: "name",
          label: "姓名",
        },
        {
          prop: "address",
          label: "地址",
        },
        {
          prop: "date",
          label: "日期",
          sortable: true,
        },
      ],
      // 操作按钮
      controller: ["编辑", "删除"],
    });

    //编辑表单配置
    const editForm = ref([
      {
        id: 1,
        name: "CommonInput",
        prop: "category_name",
        value: "",
        rule: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
        formItemAttrs: {
          label: "分类名称",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入分类名称",
        },
      },
      {
        id: 2,
        name: "CommonInput",
        prop: "short_name",
        value: "",
        formItemAttrs: {
          label: "简称",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入简称",
        },
      },
      {
        id: 3,
        name: "CommonCascader",
        prop: "pid",
        value: [0],
        options: [
          {
            label: '顶级分类',
            value: 0,
          }
        ],
        formItemAttrs: {
          label: "上级分类",
        },
        inputAttrs: {
          placeholder: "请选择",
          props: { expandTrigger: "hover" },
        },
      },
      {
        id: 4,
        name: "CommonInputNumber",
        prop: "commission_rate",
        value: 5,
        unit: "%",
        formItemAttrs: {
          label: "平台抽成比率",
        },
        inputAttrs: {
          min: 0,
          max: 100,
        },
      },
      {
        id: 5,
        name: "CommonUpload",
        prop: "image",
        value: '',
        formItemAttrs: {
          label: "分类图标",
        },
      },
      {
        id: 6,
        name: "CommonUpload",
        prop: "image_adv",
        value: '',
        formItemAttrs: {
          label: "分类广告图",
        },
      },
      {
        id: 7,
        name: "CommonSwitch",
        prop: "is_show",
        value: 0,
        formItemAttrs: {
          label: "是否显示",
        },
        inputAttrs: {
          'active-value': 0,
          "inactive-value": -1,
        }
      },
      {
        id: 8,
        name: "CommonInput",
        prop: "keywords",
        value: "",
        formItemAttrs: {
          label: "关键词",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入关键词",
        },
      },
      {
        id: 9,
        name: "CommonInput",
        prop: "description",
        value: "",
        formItemAttrs: {
          label: "分类描述",
        },
        inputAttrs: {
          type: "textarea",
          placeholder: "请输入分类描述",
        },
      },
    ]);

    //获取商品分类数
    const getGoodsCategoryTree = async () => {

      const data = await proxy.$api.reqGoodsCategoryTree()
      if (data.data.code !== 0) return
      let f = proxy.$utils.recursionTree(data.data.data, [['category_id', 'value'], ['category_name', 'label']], 1)
      let s = proxy.$utils.recursionTree(data.data.data, [['category_id', 'value'], ['category_name', 'label']], 2)
      editForm.value[2].options = editForm.value[2].options.concat(f, s)
    }

    onMounted(getGoodsCategoryTree)

    //弹出框绑定
    let isShowDialog = ref(false);

    //表格多选框触发
    const selectHandler = (val) => {
      console.log(val);
    };

    //表格操作按钮触发
    const controllerHandler = (type, row) => {
      console.log(type, row);
    };

    //编辑表单提交
    const onEditSubmit = async (params) => {
      console.log("edit", params);
      const data = await proxy.$api.reqGoodsCategoryAdd(params)
      if (data.data.code !== 0) return
      getGoodsCategoryTree()
    };

    return {
      tableAttrs,
      editForm,
      isShowDialog,
      selectHandler,
      controllerHandler,
      onEditSubmit,
    };
  },
});
</script>
